import * as React from 'react';
import { Link } from 'react-router-dom';
import { Table } from 'antd';
import { connect } from 'react-redux';
import 'bootstrap/dist/css/bootstrap.css'
import loadPostAction from '../actions/post_actions';

const columns = [{
    title: 'ID',
    dataIndex: 'id',
    id: 'id'
}, {
    title: 'CODE',
    dataIndex: 'code',
    id: 'code'
}, {
    title: '名称',
    dataIndex: 'name',
    id: 'name',
    render: (text: string, record: any) => (<Link to={`/${record.code}`}>{text}</Link>)
},
];

interface Props{
    dispatch:any,
    dataSource:string[]
}
class HomePage extends React.Component<Props,{}> {
    constructor(props: any) {
        super(props);
    }
    public componentDidMount() {
        this.props.dispatch(loadPostAction);
    }
    public render() {
        const dataSource = this.props.dataSource;
        return (
            <Table dataSource={dataSource} columns={columns} rowKey="id" />
        )
    }
}

const mapStateToPro = (state: any) => {
    return {
        dataSource: state.datas.dataSource
    }
}

export default connect(mapStateToPro)(HomePage);